<template>
  <div ref="portalPublic" v-loading="fullscreenLoading" class="portalPublic">
    <div v-show="isShowTableView" class="tableView">
      <listFilter
        ref="listFilter"
        :fields="fields"
        :high-search-file="highSearchFile"
        :list-height="height"
        :left-tool-tool-data="leftToolToolData"
        @getList="getList"
      >
        <template slot="action" slot-scope="{ data }">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-button
                :size="btnSize"
                type="primary"
                :disabled="disabledFun(data)"
                @click="delFun(data)"
              >删除</el-button>
            </el-col>
            <el-col :span="6">
              <template v-if="data.data.row.status !== 1">
                <el-button
                  :size="btnSize"
                  type="primary"
                  :disabled="disabledFun(data)"
                  @click="publishFun(data)"
                >发布</el-button>
              </template>

              <template v-else>
                <el-button
                  :size="btnSize"
                  type="primary"
                  @click="undoFun(data)"
                >回撤</el-button>
              </template>
            </el-col>
            <el-col :span="6">
              <el-button
                :size="btnSize"
                type="primary"
                @click="viewFun(data)"
              >查看</el-button>
            </el-col>
            <el-col :span="6">
              <el-button
                :size="btnSize"
                type="primary"
                :disabled="disabledFun(data)"
                @click="updateFun(data)"
              >修改</el-button>
            </el-col>
          </el-row>
        </template>
        <template slot="status" slot-scope="{ data }">
          <el-tag :type="statusTextFun(data).color || ''">{{
            statusTextFun(data).text
          }}</el-tag>
        </template>
      </listFilter>
    </div>
    <updateAdd
      v-show="!isShowTableView"
      :key="updateAddKey"
      :form="form"
      :status="status"
      :file-list="fileList"
      :label-list="labelList"
      @back="backFun"
      @save="backFun"
    />
    <portalDialog
      :dialog-visible.sync="publishShow"
      title="发布人员"
      :show-tool-bar="false"
      width="60%"
      @defineFun="defineFun"
    >
      <template slot="content">
        <publish ref="publish" :key="publishId" />
      </template>
    </portalDialog>
  </div>
</template>

<script>
// import portalTable from "@/components/portalTable";
// import portalPagination from "@/components/portalPagination";
import updateAdd from './components/updateAdd'
import {
  axiosGetNoticeList,
  axiosGetDeleteList,
  axiosGetDetailList,
  axiosNoticeStatus,
  axiosRelease,
  axiosRollBack
} from '@/api/portalPublic'
import { initFormData } from './components/createStore'
import listFilter from '@/components/listFilter'
import portalDialog from '@/components/portalDialog'
import publish from './components/publish'
const btnSize = 'mini'
export default {
  name: 'PortalPublic',
  components: {
    // portalTable,
    // portalPagination,
    updateAdd,
    listFilter,
    portalDialog,
    publish
  },
  data() {
    return {
      title: '新增公文',
      isShowTableView: true,
      btnSize,
      form: initFormData(),
      fields: [
        {
          prop: 'title',
          label: '标题',
          type: 'el-input',
          placeholder: '请输入标题',
          fixed: true
        },
        {
          prop: 'createBy',
          label: '创建人',
          type: 'el-input',
          placeholder: '请输入创建人'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          type: 'el-date-picker',
          placeholder: '请输入时间'
        },
        {
          label: '操作',
          prop: 'action',
          isTemplate: true
        }
      ],
      highSearchFile: [
        {
          prop: 'title',
          label: '标题',
          type: 'el-input',
          placeholder: '请输入标题',
          fixed: true
        },
        {
          prop: 'createBy',
          label: '创建人',
          type: 'el-input',
          placeholder: '请输入创建人'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          type: 'el-date-picker',
          placeholder: '请输入时间'
        },
        { prop: 'status', label: '状态', type: 'el-select', options: [] }
      ],
      listData: [],
      listQuery: {
        current: 1,
        size: 10,
        createBy: '',
        createTime: '',
        createUnit: ''
      },
      total: 0,
      listLoading: true,
      height: 400,
      updateAddKey: 0,
      fullscreenLoading: false,
      status: 'add',
      fileList: [],
      labelList: [],
      leftToolToolData: [{ text: '新增', click: this.handAddFun }],
      statusArr: [],
      publishShow: false,
      publishId: ''
    }
  },
  created() {
    this.getStatusMapFun()

    // this.getNoticeListFun();
  },
  mounted() {
    if (this.$refs.portalPublic) {
      this.$nextTick(() => {
        this.height = this.$refs.portalPublic.offsetHeight - 120 - 100
        console.log(this.height)
      })
    }
  },
  methods: {
    // 确定的方法
    defineFun(reslove) {
      const data = {
        noticeId: this.publishId,
        users: this.$refs.publish.value
      }
      const len = this.$refs.publish.value.length
      if (len === 0) {
        this.$message({
          message: '选择不能为空!',
          type: 'warning'
        })
      } else {
        axiosRelease(data).then(res => {
          if (res.status === 200 && res.data.code === 0) {
            reslove()
            this.$refs.listFilter.refreshFun()
          }
        })
      }
    },
    // 回撤功能
    undoFun({ data }) {
      const { row } = data
      console.log(row)
      this.$confirm('你确定回撤该公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axiosRollBack({ id: row.id })
          .then(res => {
            console.log(res)
            if (res.status === 200 && res.data.code === 0) {
              this.$refs.listFilter.refreshFun()
            } else {
              this.$message({
                message: '回撤失败!',
                type: 'warning'
              })
            }
          })
      })
    },
    // 发布方法
    publishFun({ data }) {
      const { row } = data
      this.publishShow = true
      this.publishId = row.id
    },
    // 获取状态字典
    getStatusMapFun() {
      axiosNoticeStatus().then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.statusArr = res.data.data || []
          const target = this.fields.find(v => v.prop === 'status')
          const options = res.data.data.map(v => {
            const json = {
              label: v.label,
              value: v.value
            }
            return json
          })
          this.$set(target, 'options', options)
        }
      })
    },
    // 获取table数据
    getList(index, size, query, cb) {
      const params = {
        current: index,
        size: size
      }
      Object.assign(params, query)
      axiosGetNoticeList(params).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          const map = {
            total: res.data.data.total,
            list: res.data.data.records
          }
          cb(map)
        }
      })
    },
    // 转变状态文字
    statusTextFun({ data }) {
      const { row } = data
      const status = {
        0: {
          color: '',
          text: '新增'
        },
        1: {
          color: 'success',
          text: '已发布'
        },
        2: {
          color: 'warning',
          text: '回撤'
        }
      }
      return status[row.status] || {}
    },
    // 按钮是否禁用
    disabledFun({ data }) {
      const { row } = data
      return row.status !== 0 && row.status !== 2
    },
    // 处理搜索方法
    handleFilterFun() {
      this.listQuery.current = 1
      // this.getNoticeListFun();
    },
    // 处理添加方法
    handAddFun() {
      this.isShowTableView = false
      this.updateAddKey++
      this.status = 'add'
      this.form = initFormData()
    },
    backFun() {
      this.isShowTableView = true
      // this.getNoticeListFun();
      // this.getList()
      this.$refs.listFilter.refreshFun()
    },
    // 修改方法
    updateFun({ data }) {
      const { row } = data
      this.status = 'update'
      this.fullscreenLoading = true
      axiosGetDetailList({ id: row.id }).then(res => {
        if (res.status === 200 && res.data.code === 0) {
          this.isShowTableView = false
          this.updateAddKey++
          const { fileList, fileUrl, ...form } = res.data.data
          this.form = form
          this.fileList = fileList
          this.labelList = fileUrl
        } else {
          this.$message({
            message: '操作异常!',
            type: 'error'
          })
        }
        this.fullscreenLoading = false
      })
    },
    delFun({ data }) {
      const { row } = data
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          axiosGetDeleteList({ id: row.id }).then(res => {
            if (res.data.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // let listIndex = this.listData.findIndex((v) => v.id === row.id);
              // this.listData.splice(listIndex, 1);
              this.$refs.listFilter.refreshFun()
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
            this.listLoading = false
          })
        })
    },
    viewFun({ data }) {
      // console.log(data);
      const { row } = data
      const url = window.location
      const hash = url.hash.slice(0, 1)
      window.open(hash + `/portalpublic/detail?id=${row.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.portalPublic {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .tableView {
    width: 100%;
    height: 100%;
  }
}
</style>
